<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>下拉列表式Menu</title>
		<style type="text/css">
			@import "https://fonts.googleapis.com/css?family=Montserrat";
body {
  background: #ff7f50;
  font-family: 'Montserrat', sans-serif
}

.menu {
  width: 260px;
  margin: 60px auto 0;
  cursor: pointer
}

.title {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  padding: 14px;
  border-radius: 4px;
  position: relative;
  box-shadow: 0 0 40px -10px #000;
  color: #505050
}

span {
  float: right;
  font-size: 18px!important
}

.dropdown {
  width: 100%;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 40px -10px #000;
  color: #505050;
  margin-top: 24px;
  max-height: 0;
  overflow: hidden;
  transition: all .5s
}

.down {
  max-height: 150px
}

.arrow {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #fff;
  position: absolute;
  right: 20px;
  bottom: -24px;
  display: none
}

.arrow.gone {
  display: block
}

p {
  padding: 15px 14px;
  margin: 0;
  transition: all .1s
}

p:hover {
  background: coral;
  -webkit-transform: scale(1.05);
  color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 30px -10px #000
}
		</style>
	</head>
	<body>
		<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css'>
<div class="menu">
  <div class="title" onclick="f()">John Doe <span class="fa fa-bars"></span>
    <div class="arrow"></div>
  </div>
  <div class="dropdown">
    <p>Inbox <span class="fa fa-inbox"></span></p>
    <p>Settings <span class="fa fa-gear"></span></p>
    <p>Sign Out <span class="fa fa-sign-out"></span></p>
  </div>
</div>

<script type="text/javascript">
	function f() {
  document.getElementsByClassName('dropdown')[0].classList.toggle('down');
  document.getElementsByClassName('arrow')[0].classList.toggle('gone');
  if (document.getElementsByClassName('dropdown')[0].classList.contains('down')) {
    setTimeout(function() {
      document.getElementsByClassName('dropdown')[0].style.overflow = 'visible'
    }, 500)
  } else {
    document.getElementsByClassName('dropdown')[0].style.overflow = 'hidden'
  }
}
</script>
	</body>
</html>
